<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String bathPath = request.getContextPath();
	pageContext.setAttribute("bathPath", bathPath);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta charset="utf-8">
  <title>查询卡片</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <script type="text/javascript" src="${bathPath}/js/jquery-1.9.1.min.js" ></script>
  <link rel="stylesheet" href="${bathPath}/frame/layui/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<style type="text/css"> 
.layui-table-cell .layui-form-checkbox[lay-skin="primary"]{
     top: 50%;
     transform: translateY(-50%);
}
</style>
<body style="margin-left: 30px;">

<form id="myform">
  <input type="hidden" id="userid" name="userid" value="${userid.userid}"/>
 <div class="demoTable" style="margin-top: 20px;margin-left: 15px;">
</div> 
</form>   
 <table class="layui-hide"  id="demo"></table>
<table class="layui-hide"  id="test"  lay-filter="test"></table>
           
<script src="${bathPath}/frame/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 --> 
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <a class="layui-btn layui-btn-sm" onclick="addtab()" target="_blank">发卡</a>
    <button class="layui-btn layui-btn-sm" lay-event="delete">注销</button>
	<button class="layui-btn layui-btn-sm" lay-event="guashi">挂失</button>
    <button class="layui-btn layui-btn-sm" lay-event="jiegua">解挂</button>
 
  </div>
</script>
<script type="text/html" id="barDemo">
  <div class="layui-btn-container">
	<button class="layui-btn layui-btn-xs" lay-event="upd">换卡</button>
  </div>
</script>
<script>
layui.use('element', function() {
	var $ = layui.jquery, element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
	$('.site-demo-active').on('click', function() {
		var othis = $(this), type = othis.data('type');
		active[type] ? active[type].call(this, othis) : '';
	});

	//Hash地址的定位
	var layid = location.hash.replace(/^#test=/, '');
	element.tabChange('test', layid);

	element.on('tab(test)', function(elem) {
		location.hash = 'test=' + $(this).attr('lay-id');
	});

});
//增加卡弹出框
function addtab(){
	//alert($("#userid").val());
	layer.open({
		  title:'增加卡',
		  type: 2,
		  area:['550px', '400px'],
		  content: '${bathPath}/aDKCardInfo/addPage.action?userid='+$("#userid").val()
		}); 
}

function upd(d){
	//alert(d);
layer.open({
	  title:'换卡',
	  type: 2,
	  area:['400px', '300px'],
	  content: '${bathPath}/aDKCardInfo/huanCardInfo.action?cardID='+d
	}); 
}
</script>

<script>
//表格事件
layui.use('table', function(){
  var table = layui.table;
  var layTableId="test";
  //var flag=0; //判断表格是否在增加数据
//返回data数据给表格
 var laydata="";
 function getdata(parm){
	 $.ajax({
			type:"POST",
			data:parm,
			async:false,  //默认true,异步
			url:"${bathPath}/aDKCardInfo/selectAll.action",
			success:function(data){
					laydata=data;
		    }
		});  
	 return laydata;
 }


 
//console.log(laydata);
 //搜索事件
  function selectall()
  {
	  var parm = $('#myform').serialize(); //获取表单所有数据
	  alert(parm);
	 // alert(demoReload);
  	//这里以搜索为例
  	table.reload('test',{
  		data:getdata(parm),  //返回查询后的data直接赋值
  	    page: {
  	    curr: 1 //重新从第 1 页开始
  	  }
  	});
  	}
  //监听头工具栏事件
  	table.on('toolbar(test)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id)
    ,data = checkStatus.data; //获取选中的数据
    //var length = table.cache[layTableId].length;   
    switch(obj.event){
      //注销卡（删除一行）
      case 'delete':   
        if(data.length === 0){
          layer.msg('请选择一行');
        }else if(data.length > 1){
            layer.msg('只能同时编辑一个');
        }else {
        	//alert(data);
        	layer.confirm("确定注销么？", {btn: ['确定', '取消'], title: "提示"}, function(){
			 $.ajax({
				type:"POST",
				async:true,  //默认true,异步
				url:"${bathPath}/aDKCardInfo/options.action",  //后台增删改查的action
				data:"op=del&data="+JSON.stringify(data), //选中的数据信息
				success:function(data){
					if(data!="SUCCESS"){
						layer.msg(data);
						selectall();
					}
			    }
			}); 
        	});
        }
      break;
      //挂失卡
  case 'guashi':   
	    if(data.length === 0){
	          layer.msg('请选择一行');
	        }else if(data.length > 1){
	            layer.msg('只能同时编辑一个');
	        } else {
	        	//alert(data[0].flag);
	        	if(data[0].flag==0){
	        	layer.confirm("确定挂失么？", {btn: ['确定', '取消'], title: "提示"}, function(){
				 $.ajax({
					type:"POST",
					async:true,  //默认true,异步
					url:"${bathPath}/aDKCardInfo/updateflag.action?cardID="+data[0].cardID+"&flag="+data[0].flag,  
					//data:"op=del&data="+JSON.stringify(data), //选中的数据信息
					success:function(data){
						if(data!="SUCCESS"){
							layer.msg(data);
							//selectall();
						}
				    }
				}); 
				 //layer.close(layer.index);
				 location.reload();
	        	});
	        	}
			             if(data[0].flag==8){
			            	 layer.confirm("此卡已挂失！", {btn: ['确定']});
			             }
	  
	        	}            

    break;
  case 'jiegua':   
	    if(data.length === 0){
	          layer.msg('请选择一行');
	        }else if(data.length > 1){
	            layer.msg('只能同时编辑一个');
	        } else {
	        	//alert(data[0].cardID);
	        	if(data[0].flag==8){
	        	layer.confirm("确定解挂么？", {btn: ['确定', '取消'], title: "提示"}, function(){
				 $.ajax({
					type:"POST",
					async:true,  //默认true,异步
					url:"${bathPath}/aDKCardInfo/updateflag.action?cardID="+data[0].cardID+"&flag="+data[0].flag,  
					//data:"op=del&data="+JSON.stringify(data), //选中的数据信息
					success:function(data){
						if(data!="SUCCESS"){
							layer.msg(data);
							//selectall();
						}
				    }
				}); 
				 //layer.close(layer.index);
				 location.reload();
	        	});
	        	}
			             if(data[0].flag==0){
			            	 layer.confirm("此卡已解挂！", {btn: ['确定']});
			             }
	  
	        	}            

  break;
  }
  });
        	
  //监听行工具栏事件
	table.on('tool(test)', function(obj){
		var data = obj.data //获得当前行数据
	    ,layEvent = obj.event; //获得 lay-event 对应的值
	  if(layEvent === 'upd'){
		upd(data.cardID);
	    } 
});
        	
//监听排序
  table.on('sort(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
  //console.log(obj.field); //当前排序的字段名
  //console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
  //console.log(this); //当前排序的 th 对象
  parm="sort="+obj.field+"&order="+ obj.type;
  //alert(parm);
  
  table.reload('test', {
    initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。 layui 2.1.1 新增参数
    ,data:getdata(parm)
  });
}); 
//文本框搜索
		  $('.demoTable .layui-btn').on('click', function(){
		    selectall();
		  });		  
  //渲染表格
 table.render({
	    elem: '#test'
	    ,id: layTableId
	    ,url:'${bathPath}/aDKCardInfo/selectAll.action?userid='+$("#userid").val()
	 	//,data:getdata()
	    ,toolbar: '#toolbarDemo' 
	    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
	    ,width: 800
	    ,size:'sm'//小表格
	    ,cols: [[
	    	 {type: 'checkbox', fixed: 'left',align:'center',width:'5%'}
			,{type: 'numbers',title:'序号', fixed: 'left',align:'center',width:'10%'}
	      	,{field: 'cardID',title:'卡号', fixed: 'left',align:'center',width:'20%'}
	      	,{field: 'cardSN',title:'卡编号', fixed: 'left',align:'center',width:'15%'}
	      	/* ,{field: 'UserID',title:'人员编号', fixed: 'left',align:'center',sort:true,width:'20%',edit: 'text'} */
	      	, {field: 'cardKind',title:'卡类别', fixed: 'left',align:'center',width:'15%',templet:function(d)
	      		{
  				if(d.cardKind==0)
      				{
      					return "实体卡";	      					
      				};
  				if(d.cardKind==1)
  				{
  					return "指纹号";
  				};
  				if(d.cardKind==2)
  				{
  					return "手机号转";
  				};
  		}}
	      	,{field: 'flag',title:'卡状态', fixed: 'left',align:'center',width:'15%',edit: 'text',templet:function(d)
	      		{
  				if(d.flag==0)
      				{
      					return "正常";	      					
      				};
  				if(d.flag==8)
  				{
  					return "挂失";
  				};
  				if(d.flag==9)
  				{
  					return "离职";
  				};
  		}}
	      	,{templet: '#caozuo', title: '操作',align:'center',width:'19.9%',toolbar: '#barDemo'}
	    ]]
	    ,page: true //开启分页
	    ,limit:10   //默认十条数据一页
        ,limits:[10,20,30,40,100]  //数据分页条
	  }); 
});
</script>

</body>
</html>